<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Bootstrap1</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .row{
            margin: 5px 0;
        }
        .row>div{
            box-shadow: 0 0 1px lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello Bootstrap</h1>
        <!-- .col-lg- (大屏幕≥1200px) .col-md- (中等屏幕≥992px)
        .col-sm- (小屏幕≥768px) .col-xs- (超小屏幕<768px)-->
        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">2</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">3</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">4</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">5</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">6</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">7</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">8</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">9</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">10</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">11</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">12</div>
        </div>
        <!-- .col-xs- 确保了每行的列数是固定的 -->
        <div class="row">
            <div class="col-xs-1">1</div>
            <div class="col-xs-1">2</div>
            <div class="col-xs-1">3</div>
            <div class="col-xs-1">4</div>
            <div class="col-xs-1">5</div>
            <div class="col-xs-1">6</div>
            <div class="col-xs-1">7</div>
            <div class="col-xs-1">8</div>
            <div class="col-xs-1">9</div>
            <div class="col-xs-1">10</div>
            <div class="col-xs-1">11</div>
            <div class="col-xs-1">12</div>
        </div>
        <div class="row">
            <div class="col-xs-2">1</div>
            <div class="col-xs-10">2</div>
        </div>
        <div class="row">
            <div class="col-xs-10">1</div>
            <div class="col-xs-2">2</div>
        </div>
        <!-- offset类可以将列向右侧偏移 -->
        <div class="row">
            <div class="col-xs-1 col-xs-offset-1">1</div>
            <div class="col-xs-1 col-xs-offset-1">2</div>
            <div class="col-xs-1 col-xs-offset-1">3</div>
            <div class="col-xs-1 col-xs-offset-1">4</div>
            <div class="col-xs-1 col-xs-offset-1">5</div>
            <div class="col-xs-1 col-xs-offset-1">6</div>
            <div class="col-xs-1">7</div>
        </div>
    </div>
</body>
</html>